<template>
  <view class="body">
    <f-navbar title=" " bgColor="#1a1a1a" navbarType="0" fontColor="#fff">
      <view class="u-flex" slot="default" @leftClick="leftClick">
        <view class="left_icon" @click="settingClick">
          <u-icon name="list" color="#fff" size="28"></u-icon>
        </view>
        <view class="left_icon" @click="scan">
          <i class="iconfont icon-scanning"></i>
        </view>
        <view class="left_select" @click="selectStatus">
          <view
            style="display: flex; align-items: center; justify-content: center"
          >
            <view class="add_or" v-if="user_status == 0">-</view>
            <view
              class=""
              v-else
              style="
                width: 24rpx;
                height: 24rpx;
                background: #12b315;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <u-icon name="checkbox-mark" size="14" color="#fff"></u-icon>
            </view>
            <view
              style="
                font-size: 22rpx;
                font-family: PingFang SC-Semibold, PingFang SC;
                font-weight: 600;
                color: #ffffff;
                margin-left: 10rpx;
                margin-right: 10rpx;
              "
              >{{ user_status == 1 ? "上线中" : "下线中" }}
            </view>
            <u-icon name="arrow-down-fill" color="#fff" size="18"></u-icon>
          </view>
        </view>
        <view class="select" v-if="isSelect" @click="toUserStatus">
          <view class="add_or" v-if="user_status == 1">-</view>
          <view
            class=""
            v-else
            style="
              width: 24rpx;
              height: 24rpx;
              background: #12b315;
              border-radius: 50%;
              display: flex;
              justify-content: center;
              align-items: center;
            "
          >
            <u-icon name="checkbox-mark" size="14" color="#fff"></u-icon>
          </view>
          <text
            style="
              font-size: 24rpx;
              font-family: PingFang SC-Semibold, PingFang SC;
              font-weight: 600;
              margin-left: 10rpx;
            "
            >{{ user_status == 1 ? "下线" : "上线" }}</text
          >
          <view class="sanjiao"></view>
        </view>
      </view>
    </f-navbar>
    <u-sticky>
      <u-tabs
        :list="order_type == 'auto' ? list : list1"
        lineWidth="30"
        :scrollable="false"
        itemStyle="padding-left: 14rpx; padding-right: 14rpx; height: 90rpx;"
        active-color="#fff"
        inactive-color="#8c8c8c"
        @change="tabChange"
        :current="current"
        style="background-color: #fff"
      ></u-tabs>
    </u-sticky>
    <statusList
      :list="statusList"
      :current="current_name"
      @confirm="confirm"
      @refreshList="getList"
    ></statusList>
    <view class="bottom">
      <view
        style="display: flex; flex-direction: column; align-items: center"
        @click="toSetting"
      >
        <u-icon name="list" color="#262626" size="40"></u-icon>
        <text
          style="
            font-size: 20rpx;
            font-family: PingFang SC-Regular, PingFang SC;
            font-weight: 400;
            color: #262626;
          "
          >接单设置</text
        >
      </view>
      <view class="fix_list" @click="agreeList">
        <u-icon name="reload" color="#000000" size="36"></u-icon>
        <text style="margin-left: 10rpx">刷新列表</text>
      </view>
    </view>
    <u-popup v-model="setingshow" mode="left">
      <view class="set_popup">
        <view class="top">
          <image mode="aspectFill" class="img" :src="img_url"></image>
          <view style="margin-left: 20rpx">
            <view
              style="
                font-size: 30rpx;
                font-family: PingFang SC-Semibold, PingFang SC;
                font-weight: 600;
                color: #262626;
              "
              >{{ user.real_name }}</view
            >
            <view
              style="
                font-size: 24rpx;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #8c8c8c;
              "
              >{{ user_status == 1 ? "上线中" : "下线中" }}</view
            >
          </view>
        </view>
        <view class="zhanghu">
          <view @click="$utils.toUrl('/distribution/account/index')">
            <view class="my_z" style="">
              <view
                style="
                  width: 8rpx;
                  height: 8rpx;
                  background: #f0250e;
                  border-radius: 0rpx 0rpx 0rpx 0rpx;
                  margin-right: 16rpx;
                "
              ></view>
              <view style="margin-right: 4rpx; color: #262626"> 我的账户 </view>
              <u-icon name="arrow-right" color="#262626" size="28"></u-icon>
            </view>
            <view style="margin-top: 10rpx; margin-left: 20rpx">
              <text
                style="
                  font-size: 54rpx;
                  font-family: PingFang SC-Semibold, PingFang SC;
                  font-weight: 600;
                  color: #262626;
                "
                >{{ cashInfo.today_money }}</text
              >
              <text
                style="
                  font-size: 22rpx;
                  font-family: PingFang SC-Semibold, PingFang SC;
                  font-weight: 600;
                  color: #262626;
                  margin-left: 10rpx;
                "
                >元</text
              >
            </view>
            <view
              style="
                font-size: 22rpx;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #8c8c8c;
                margin-top: 10rpx;
                margin-left: 20rpx;
              "
              >今日收入</view
            >
          </view>
          <view @click="$utils.toUrl('/distribution/account/order')">
            <view class="my_z">
              <view
                style="
                  width: 8rpx;
                  height: 8rpx;
                  background: #01ab5b;
                  border-radius: 0rpx 0rpx 0rpx 0rpx;
                  margin-right: 16rpx;
                "
              ></view>
              <view style="margin-right: 4rpx; color: #262626"> 订单统计 </view>
              <u-icon name="arrow-right" color="#262626" size="28"></u-icon>
            </view>
            <view style="margin-top: 10rpx; margin-left: 20rpx">
              <text
                style="
                  font-size: 54rpx;
                  font-family: PingFang SC-Semibold, PingFang SC;
                  font-weight: 600;
                  color: #262626;
                "
                >{{ cashInfo.today_order }}</text
              >
              <text
                style="
                  font-size: 22rpx;
                  font-family: PingFang SC-Semibold, PingFang SC;
                  font-weight: 600;
                  color: #262626;
                  margin-left: 10rpx;
                "
                >单</text
              >
            </view>
            <view
              style="
                font-size: 22rpx;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #8c8c8c;
                margin-top: 10rpx;
                margin-left: 20rpx;
              "
              >今日完成订单</view
            >
          </view>
        </view>
        <view class="set_or">更多功能</view>
        <view class="order_item">
          <view
            class="item"
            @click="$utils.toUrl('/distribution/order/order_list')"
          >
            <u-icon name="file-text" color="#2c7efe" size="60"></u-icon>
            <view class="item-t">历史订单</view>
          </view>
          <!-- <view class="item">
            <u-icon name="red-packet" color="#FE8518" size="60"></u-icon>
            <view class="item-t">我的钱包</view>
          </view> -->
          <view
            class="item"
            @click="$utils.toUrl('/distribution/setting/user_set')"
          >
            <u-icon name="setting" color="#01AB5B" size="60"></u-icon>
            <view class="item-t">设置中心</view>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import fNavbar from "./components/f-navbar/components/f-navbar/f-navbar.vue";
import statusList from "./components/status.vue";
export default {
  components: {
    fNavbar,
    statusList
  },
  data() {
    return {
      current: 0,
      img_url: "",
      isSelect: false,
      setingshow: false,
      order_type: "",
      timer: null,
      default_time: "",
      statusList: [],
      current_name: "",
      user: {},
      list: [
        //     {
        //       name: "新任务",
        // active:0,
        //     },
        {
          name: "待取货"
        },
        {
          name: "配送中"
        }
      ],
      user_status: "",
      list1: [
        {
          name: "新任务"
        },
        {
          name: "待取货"
        },
        {
          name: "配送中"
        }
      ],
      cashInfo: {}
    };
  },
  onLoad() {
    if (this.order_type == "auto") {
      this.current_name = this.list[0].name;
    } else {
      this.current_name = this.list1[0].name;
    }
    this.getCashInfo();
  },
  async onShow() {
    const res = await this.$allrequest.distribution.getCourierInfo();
    if (!res.code) {
      uni.setStorageSync("authData", res.data);
      let { courier, local_setting } = res.data;
      this.user_status = courier.status;
      this.user = courier;
      this.img_url = this.user.avatar;

      this.order_type = local_setting.send_type.value;
      this.default_time = local_setting.default_time.value;
    }

    this.getList();
    this.timer = setInterval(() => {
      this.getList();
    }, 10000);
  },
  onHide() {
    clearInterval(this.timer);
  },
  onUnload() {
    clearInterval(this.timer);
  },
  methods: {
    scan() {
      uni.scanCode({
        success: (res) => {
          let { result, errMsg } = res;
          if (errMsg === "scanCode:ok") {
						if (!result) {
							result = res.path
						}
            let scene = result.slice(result.indexOf("scene=") + 6);
            let { order_no, id } = this.$utils.sceneDecode(scene);
            this.$utils.toUrl(
              `/distribution/index/result?order_no=${order_no}&order_id=${id}`
            );
            return;
          }

          this.$utils.toast(result);
        }
      });
    },
    async toUserStatus() {
      const res = await this.$allrequest.distribution.changeStatus(
        { status: this.user_status == 1 ? 0 : 1 },
        true
      );
      if (res.code == 0) {
        const res1 = await this.$allrequest.distribution.getCourierInfo(
          {},
          true
        );
        uni.setStorageSync("authData", res1.data);
        // this.$store.commit("setAuthData", res1.data);
        if (res1.code == 0) {
          this.user_status = res1.data.courier.status;

          this.$utils.toast(res.msg);
        }
        this.isSelect = false;
      }
    },
    async getCashInfo() {
      const res = await this.$allrequest.distribution.getCashInfo({}, true);
      if (res.code == 0) {
        this.cashInfo = res.data;
      }
    },
    tabChange(val) {
      this.current = val;
      if (this.order_type == "auto") {
        this.current_name = this.list[val].name;
      } else {
        this.current_name = this.list1[val].name;
      }
      this.getList();
    },
    selectStatus() {
      this.isSelect = !this.isSelect;
    },
    async getList() {
      let locationData = await this.$store.dispatch("getLocation");
      let status;
      if (this.current_name == "新任务") {
        status = 1;
      } else if (this.current_name == "待取货") {
        status = 2;
      } else {
        status = 3;
      }
      const res = await this.$allrequest.distribution.getOrderList(
        { status, lat: locationData.latitude, lng: locationData.longitude },
        true
      );
      if (res.code == 0) {
        res.data.data.forEach((item) => {
          if (item.delivery_time > 0) {
            item.mintune = parseInt((item.delivery_time - item.pay_time) / 60);
          } else {
            item.mintune = parseInt(
              (item.pay_time * 1000 +
                this.default_time * 60 * 1000 -
                new Date().getTime()) /
                1000 /
                60
            );
          }
        });
        this.statusList = res.data.data;
      }
    },
    agreeList() {
      this.getList();
    },
    leftClick() {
    },
    settingClick() {
      this.setingshow = true;
    },
    toSetting() {
      this.$utils.toUrl("/distribution/setting/order_set", "navigate");
    },
    confirm() {
      this.getList();
    }
  }
};
</script>

<style lang="scss" scoped>
.body {
  min-height: 100vh;
  background: #f8f8f8;
  padding-bottom: 120rpx;
}

.left_icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60rpx;
  height: 60rpx;
  background: #313131;
  border-radius: 120rpx 120rpx 120rpx 120rpx;
  // opacity: 0.1;
  margin-right: 20rpx;
  color: #fff;
  font-size: 30rpx;
}

.left_select {
  width: 170rpx;
  height: 60rpx;
  background: #313131;
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-radius: 120rpx 120rpx 120rpx 120rpx;
  position: relative;

  // opacity: 0.1;
}
.add_or {
  width: 24rpx;
  height: 24rpx;
  background: #f0250e;
  border-radius: 50%;
  text-align: center;
  line-height: 24rpx;
  margin-top: 5rpx;
}
.select {
  width: 170rpx;
  height: 82rpx;
  background: #ffffff;
  box-shadow: 0rpx 0rpx 20rpx 2rpx rgba(0, 0, 0, 0.16);
  border-radius: 10rpx 10rpx 10rpx 10rpx;
  opacity: 1;
  position: absolute;
  bottom: -100rpx;
  left: 186rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  .sanjiao {
    /*宽高为0*/
    width: 0;
    height: 0;

    border-top: 10rpx solid transparent;

    border-bottom: 10rpx solid white;
    border-left: 10rpx solid transparent;
    border-right: 10rpx solid transparent;
    position: absolute;
    top: -20rpx;
    left: 54rpx;
  }
}

/deep/ .u-tabs {
  background-color: #1a1a1a !important;
}
.bottom {
  width: 100%;
  height: 112rpx;
  background: #ffffff;
  position: fixed;
  bottom: 0;
  padding: 24rpx 0rpx 24rpx 30rpx;
  display: flex;
  .fix_list {
    width: 584rpx;
    height: 80rpx;
    background: #ffffff;
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    opacity: 1;
    border: 2rpx solid #f2f2f2;
    margin-left: 30rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30rpx;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #262626;
  }
}
.set_popup {
  width: 630rpx;
  height: 100vh;
  background: #f2f2f2;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  padding: 124rpx 0rpx 0rpx 24rpx;
  .top {
    display: flex;
    .img {
      width: 72rpx;
      height: 72rpx;
      border-radius: 50%;
    }
  }
  .zhanghu {
    width: 582rpx;
    height: 212rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin-top: 26rpx;
    padding-left: 30rpx;
    padding-right: 106rpx;
    .my_z {
      display: flex;
      align-items: center;
    }
  }
  .set_or {
    font-size: 28rpx;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #262626;
    margin: 30rpx 0;
  }
  .order_item {
    display: flex;
    margin-left: 28rpx;
    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-right: 62rpx;
      .item-t {
        font-size: 22rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #262626;
        margin-top: 14rpx;
      }
    }
  }
}
</style>
